<template>
  <div id="add">
    <!-- 海报区 -->
    <div class="top_img">
      <div class="top_icon">
        <div>CODE & STUDY</div>
        <div>Learning Is The Source Of Happiness</div>
      </div>
    </div>
    <!-- 技能训练 -->
    <div class="top1">
      <div class="top1_Headline"><span class="top1_Headline_2">技能训练</span><span class="top1_Headline_1" @click="view">View All</span></div>
      <div class="top1_Subheading"><span>jquery训练、lol官网模仿、vant组件训练</span></div>
      <div class="top1_Exhibition">
        <!-- 数据渲染区域 -->
        <div v-for="el in Skill" :key="el.id" class="top1_Exhibition_0">
            <a :href='el.to' target="_blank" >
              <div class="top1_Exhibition_1">
                <img :src="el.images">
                <div class="top1_Exhibition_5">点击浏览</div>
              </div>
            </a>
            <div class="top1_Exhibition_2">{{el.Title}}</div>
            <div class="top1_Exhibition_3">{{el.knowledge}}</div>
            <div class="top1_Exhibition_4">{{el.Ps}}</div>
        </div>
      </div>
    </div>
    <!-- 小游戏 -->
    <div id="Html" class="img_fixed">
      <div class="game">
        <div class="game_Title">
          <div>HTML小游戏</div>
          <div>也是一个学习的途径</div>
        </div>
        <div class="game_content">
          <div class="game_content_1" v-for="el in GAME" :key="el.ps">
            <a :href="el.to" target="_blank">
              <div class="game-content_img">
                <img :src="el.images" alt="">
              </div>
            </a>
            <div class="game-content_text">
              <span>{{el.Title}}</span><br>{{el.knowledge1}}<br>{{el.knowledge2}}<br>{{el.knowledge3}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 作品展示 -->
    <div class="top1">
      <div class="top1_Headline"><span class="top1_Headline_2">设计作品</span><span class="top1_Headline_1" @click="view">View All</span></div>
      <div class="top1_Subheading"><span>懂设计才能更懂前端</span></div>
      <div class="top1_Exhibition">
        <!-- 数据渲染区域 -->
        <div v-for="el in DESIGN" :key="el.index" class="top1_Exhibition_0">
          <a :href="el.to" target="_blank">
            <div class="top1_Exhibition_1">
              <img :src="el.images">
              <div class="top1_Exhibition_5">点击观赏</div>
            </div>
          </a>
          <div class="top1_Exhibition_2">{{el.Title}}</div>
          <div class="top1_Exhibition_3">{{el.knowledge}}</div>
          <div class="top1_Exhibition_4">{{el.Ps}}</div>
        </div>
      </div>
    </div>
    <!-- 留言 -->
    <div class="fixed">
      <div class="game">
        <div class="game_Title">
          <div>留    言</div>
          <div>留下您的宝贵意见吧</div>
        </div>
        <div class="game_content">
            <input ref="text" class="type_text" placeholder="Your Name" type="text">
            <textarea ref="textarea" style="resize:none;" placeholder="Fill in opinions" class="type_textarea" name="" id="" cols="30" rows="10"></textarea>
            <input @click="Leaving" class="type_submit" type="submit">
        </div>
        <div class="bottom"><a target="_blank" href="http://www.beian.miit.gov.cn">鄂ICP备19027658号</a></div>
      </div>
    </div>
  <Top class="app"></Top>
  </div>
</template>
<script>
import Top from '../top'
import DataSkill from '../../data/Skill'
// const DataSkill = require('../../data/Skill/index.js')
export default {
  data: () => ({
    Skill: [],
    GAME: [],
    DESIGN: []
  }),
  created () {
    this.Skill = DataSkill.Skill.data
    this.GAME = DataSkill.Game.data
    this.DESIGN = DataSkill.Design.data
    console.log(this.Skill[0].images)
  },
  methods: {
    view () {
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
    },
    Leaving () {
      // eslint-disable-next-line no-unused-vars
      var Te = this.$refs.text.value
      // eslint-disable-next-line no-unused-vars
      var Ta = this.$refs.textarea.value
      if (Te.lenght === 0 || Ta.length === 0) {
        alert('请输入留言内容')
      } else {
        // this.$FS.readFile('../../data/data.json', 'utf-8', (err, data) => {
        //   if (err) return console.log(err.message)
        //   console.log(data)
        // })
        alert('对不起，留言功能尚未完善，请联系站主')
      }
    }
  },
  components: {
    Top
  }
}
</script>
<style lang="less" scoped>
.app{
  z-index: 9999;
}
// 海报处
.top_img {
  width: 100%;
  height: 100vh;
  background: red;
  background: url(../../image/header-bg.jpg) no-repeat center center;
  display: flex;
  justify-content: center;
  align-items: center;
  // 海报里面的文字
  .top_icon{
    width: 100%;
    height: 120px;
    // background: red;
    text-align: center;
    div:nth-child(1){
      font-size: 50px;
      // font-weight: 600;
      color: #fff;
      @media only screen and (max-width:500px){
        font-size: 40px;
      }
    }
    div:nth-child(2){
      font-size: 22px;
      color: rgba(255, 255, 255, 0.5);
      @media only screen and (max-width:500px){
        font-size: 16px;
      }
    }
  }
}
// 技能训练
.top1{
  width: 100%;
  // height: 300px;
  padding-top: 50px;
  background: rgb(251, 251, 251);
  // 标题处
  .top1_Headline{
    width:1200px;
    margin: 0 auto;
    font-size: 36px;
    letter-spacing:8px;
    text-align: left;
    color: #475B6F;
    @media only screen and (max-width:500px){
      width:100%;
      .top1_Headline_1{
        margin-right: 10px;
      }
      .top1_Headline_2{
        margin-left: 10px;
      }
    }
    // 技能训练
    .top1_Headline_1{
      text-align: right;
      float: right;
      font-size: 18px;
      letter-spacing:0px;
      border: 1px #475B6F solid;
      padding: 8px 10px;
    }
    // view all
    .top1_Headline_1:hover{
      background: #475B6F;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }
  }
  // 副标题出
  .top1_Subheading{
    width:1200px;
    margin: 0 auto;
    margin-top: 8px;
    letter-spacing:1px;
    text-align: left;
    color: #475B6F;
    @media only screen and (max-width:500px){
      width:100%;
      span{
        margin-left: 10px;
      }
    }
  }
  // 内容处
  .top1_Exhibition{
    width:1200px;
    // height: 500px;
    // background: red;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
    @media only screen and (max-width:500px){
      width:100%;
      flex-direction:column;
      align-content:flex-start;
    }
    // 模块渲染
    .top1_Exhibition_0{
      width: 380px;
      height:400px;
      background: rgb(251, 251, 251);
      @media only screen and (max-width:500px){
        width:100%;
        .top1_Exhibition_1{
          margin: 0 auto;
          border: 1px rgb(214, 214, 214) solid;
        }
        .top1_Exhibition_2,.top1_Exhibition_3,.top1_Exhibition_4{
          width: 21.5625rem;
          margin: 0 auto;
        }
      }
      // 图片内容块
      .top1_Exhibition_1{
        cursor: pointer;
        overflow: hidden;
        width: 380px;
        height: 220px;
        background: #000;
        border-bottom: 1px rgb(214, 214, 214) solid;
        position: relative;
        @media only screen and (max-width:500px){
          width: 21.5625rem;
          height: 12.5rem;
        }
        img{
          width: 100%;
          transition: 0.2s;
        }
      }
      .top1_Exhibition_1:hover{
        img{
          width: 200%;
          opacity: 0.4;
          margin-left: -185px;
          margin-top: -45px;
        }
        .top1_Exhibition_5{
          display: block;
        }
      }
      // 大标题
      .top1_Exhibition_2{
        font-size:24px;
        margin-top: 15px;
        letter-spacing:2px;
        color: #3A4F52;
        cursor: pointer;
        transition: 0.1s;
      }
      .top1_Exhibition_2:hover{
          letter-spacing: 15px;
        }
      // 小标题
      .top1_Exhibition_3{
        font-size:16px;
        margin-top: 10px;
        letter-spacing:2px;
        color: #3A4F52;
      }
      // ps区域
      .top1_Exhibition_4{
        font-size:14px;
        margin-top: 10px;
        letter-spacing:2px;
        color:#4da7ca;
      }
      // 图片里面的内容
      .top1_Exhibition_5{
        width: 120px;
        height: 30px;
        border: 1px #fff solid;
        color: #fff;
        text-align: center;
        line-height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
        transition: 0.2s;
        font-size: 14px;
        display: none;
      }
      .top1_Exhibition_5:hover{
        background: #fff;
        color: #3A4F52;
      }
    }
  }
}
// 小游戏
.img_fixed{
  padding-top: 50px;
  padding-bottom: 30px;
  margin-top: 30px;
  width: 100%;
  // height: 450px;
  background:url(../../image/traffic.jpg);//背景路径
  // background: transparent no-repeat center center fixed;
  background-size:cover;//填充
  background-repeat:no-repeat;//无重复
  background-position: center;
  background-attachment: fixed;//固定
  .game{
    width: 1200px;
    // height:400px;
    // background: red;
    // border: 1px red solid;
    color: #fff;
    margin: auto;
    .game_Title{
      text-align: center;
      letter-spacing: 1px;
      div:nth-child(1){
        font-size: 32px;
      }
      div:nth-child(2){
        margin-top: 5px;
      }
    }
    .game_content{
      width: 100%;
      height: 250px;
      margin-top: 40px;
      margin-bottom: 40px;
      display: flex;
      justify-content:space-between;
      // background: red;
      .game_content_1{
        display: inline-block;
        width: 380px;
        height: 250px;
        // background: red;
        .game-content_img{
          width: 270px;
          height: 150px;
          margin: auto;
          background: rgb(153, 44, 255);
          overflow: hidden;
          cursor: pointer;
          img{
            width: 100%;
          }
        }
        .game-content_text{
          margin-top: 5px;
          text-align: center;
          font-size: 14px;
          span{
            font-size: 18px;
            letter-spacing: 1px;
            display: inline-block;
            margin-bottom: 3px;
            cursor: pointer;
            transition: 0.1s;
          }
          span:hover{
            letter-spacing: 15px;
            color: rgb(233, 255, 155);
          }
        }
      }
    }
  }
  @media only screen and (max-width:500px){
    .game{
      width: 100%;
      .game_content{
        height: 800px;
        flex-direction:column;
        .game_content_1{
          width: 100%;
        }
      }
    }
  }
}
// 留言
.fixed{
  a{
    text-decoration: none;

  }
  padding-top: 50px;
  padding-bottom: 10px;
  margin-top: 30px;
  width: 100%;
  height: 400px;
  background:url(../../image/blue_mac2.jpg);//背景路径
  background-size:cover;//填充
  background-repeat:no-repeat;//无重复
  background-position: center;
  background-attachment: fixed;//固定
  .game{
    width: 1200px;
    // height:400px;
    // background: red;
    // border: 1px red solid;
    color: #fff;
    margin: auto;
    .game_Title{
      text-align: center;
      letter-spacing: 1px;
      div:nth-child(1){
        font-size: 32px;
      }
      div:nth-child(2){
        margin-top: 5px;
      }
    }
    .game_content{
      width: 100%;
      height: 250px;
      margin-top: 40px;
      // margin-bottom: 20px;
      text-align: center;
      // display: flex;
      // justify-content:space-between;
      // background: red;
      input{
        display: block;
        margin: auto;
        background: rgba(255, 255, 255, 0);
        border: 1px solid rgba(255, 255, 255,0.7);
        border-radius: 4px;
        padding: 5px 10px;
        box-sizing: border-box;
        outline-color:rgb(255, 104, 104);
      }
      .type_text{
        width: 450px;
        height: 30px;
        font-family:"微软雅黑";
        color: #fff;
      }
      .type_textarea{
        width: 450px;
        height: 100px;
        margin-top: 10px;
        background: rgba(155, 149, 149, 0);
        border: 1px solid rgba(255, 255, 255,0.7);
        border-radius: 4px;
        box-sizing: border-box;
        padding: 5px 10px;
        outline-color:red;
        font-family:"微软雅黑";
        color: #fff;
      }
      .type_submit{
        width: 100px;
        height: 30px;
        margin-top: 10px;
        color: #fff;
        cursor: pointer;
        outline:none;
      }
      .type_submit:hover{
        background: #fff;
        color: rgb(58, 124, 138);
      }
      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      color:    rgb(221, 221, 221);
      }
    }
    .bottom{
      text-align: center;
      opacity: 0.3;
    }
  }
  @media only screen and (max-width:500px){
    .game{
      width: 100%;
      .game_content{
        height: 260px;
        // flex-direction:column;
        .type_text{
        width: 90%;
        height: 30px;
        font-family:"微软雅黑";
        color: #fff;
      }
      .type_textarea{
        width: 90%;
        height: 100px;
        margin-top: 10px;
        background: rgba(155, 149, 149, 0);
        border: 1px solid rgba(255, 255, 255,0.7);
        border-radius: 4px;
        box-sizing: border-box;
        padding: 5px 10px;
        outline-color:red;
        font-family:"微软雅黑";
        color: #fff;
      }
      .type_submit{
        width: 100px;
        height: 30px;
        margin-top: 10px;
        color: #fff;
        cursor: pointer;
        outline:none;
      }
      }
    }
  }
}
</style>
